<template>
  <div class="box_dialog">
    {{ children }}
    <el-button type="primary" @click="handleShowDialog"> 显示弹框 </el-button>
    <ComDialog v-model="isShow"
               title="我是弹框的标题"
               :obj="dataMap"
               :name="dataMap.name"
               :demoName="dataMap.demoObj.name"
               @input="handleInput"
               @change="handleChange"
               @handleBlur="handleBlur">
      <div>弹框的身体</div>
    </ComDialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, onUnmounted, inject, provide } from 'vue'
const children = inject('children')
const isShow = ref(false)
const handleShowDialog = () => {
    isShow.value = true
    dataMap.demoObj.name = '我是弹框的name'
}
const dataMap = reactive({
    name: '',
    demoObj: {
        name: '123'
    }
})
provide('demoName1', dataMap.demoObj)
provide('father', dataMap.demoObj.name)
const handleInput = () => {
    console.log(dataMap.name)
}
const handleChange = () => {
    console.log(dataMap.name)
}
const demoName = ref('')
const handleBlur = (val: string) => {
    console.log(val)
    console.log(demoName.value)
}
// 点击dialog外的区域隐藏dialog
// const handleHide = (e: any) => {
//    console.log(e.target.className)
//    if (e.target.className !== 'el-button' || 'dialog') {
//       isShow.value = true
//    } else {
//       isShow.value = false
//    }
// }
onMounted(() => {
    //  document.addEventListener("click", handleHide)
})
onUnmounted(() => {
    //  document.removeEventListener('click', handleHide)
})
</script>

<style lang="less" scoped>
.box_dialog {
}
</style>
